<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <title>系统统计数据</title>
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all" />
    <link rel="stylesheet" href="../../../backstage/lib/bootstrap/css/bootstrap.css" media="all" />

    <style type="text/css">

        span{

            width: 200px;

            height: 30px;

            display: block;

            font-size: large;

        }
    </style>
</head>

<body>
    <div class="x-body">
        <blockquote class="layui-elem-quote">
            <sapn>admin</sapn>欢迎使用后台管理系统！
        </blockquote>
        <div class="sum">
            <section class="panel bgys">
                <div class="value tab-menu" bind="1">
                        <span></span>
                    <span >用户总数</span>
                    <span id="userNum" ></span>
                </div>
            </section>
            <section class="panel bgys">
                <div class="value tab-menu" bind="1">
                    <span></span>
                    <span >商品总数</span>
                    <span id="itemNum"></span>
                </div>
            </section>
            <section class="panel bgys">
                <div class="value tab-menu" bind="1">
                    <span></span>
                    <span>订单总数</span>
                        <span id="billNum"></span>
                </div>
            </section>
            <section class="panel bgys">
                <div class="value tab-menu" bind="1">
                    <span></span>
                    <span>会员总数</span>
                        <span id="memberNum"></span>
                </div>
            </section>
        </div>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend>数据统计</legend>
        </fieldset>
        <!--相关统计-->
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    周统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="main" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    商品类型统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="area" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    订单年度统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
    </div>
    <script src="../../../backstage/js/jquery.min.js"></script>
    <script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../backstage/js/echarts.min.js"></script>
    <!-- 在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数，如果是不想设置的话也要初始化可以将其设置为空JSON就可以了，要不然会出项报错，同时要保证在echarts.init之前的对象是有宽高的，要不然也会出现错误 -->
    <script type="text/javascript">

        $(document).ready(function() {

            $.ajax({
                url: "/statistic/graph",
                type: "GET",
                dataType: "json",
                async: false,
                success: function(result) {
                    console.log(result);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            //图标悬停的提示内容
            tooltip: {
                trigger: 'axis'
            },
            //t图标
            legend: {
                data: ['用户', '商品', '订单', '会员']
            },
            //布局
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //颜色
            color: ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
            ],
            //X轴
            xAxis: {
                type: 'category',
                data: ["第一周", "第二周", "第三周", "第四周"]
            },
            //Y轴
            yAxis: {
                type: 'value',
                name:"总量/个"
            },
            //echarts必不可少的部分用于指定图标的类型（饼图、柱状图）之类
            series: [{
                    name: '用户',
                    type: 'line',
                    //stack: '总量',因为纵坐标显示不准确，需要将stack注释掉
                    data: [result.userList[0],result.userList[1], result.userList[2], result.userList[3]]
                },
                {
                    name: '商品',
                    type: 'line',
                    //stack: '总量',
                    data: [result.itemList[0], result.itemList[1], result.itemList[2], result.itemList[3]]
                },
                {
                    name: '订单',
                    type: 'line',
                    //stack: '总量',
                    data: [result.billList[0],result.billList[1], result.billList[2],result.billList[3]]
                },
                {
                    name: '会员',
                    type: 'line',
                    //stack: '总量',
                    data: [ result.memberList[0], result.memberList[1], result.memberList[2], result.memberList[3]]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

                }
            });
        });
    </script>

    <script type="text/javascript">

        $(document).ready(function() {

            var type = [];
            var lists = [];
            var obj={value:"123",
            name:"123"};


            $.ajax({
                url: "/statistic/sectorChart",
                type: "GET",
                dataType: "json",
                async: false,
                success: function (data) {
                    console.log(data);

                        var list = data.typeList;
                        var list1 = data.numList;
                        for (i = 0; i < list.length; i++) {
                            type.push(list[i]);    //遍历类型并填入数组
                            obj.name = list[i];
                            obj.value = list1[i];

                            lists.push(obj);
                            obj={};
                        }
                    console.log(lists);
                    console.log(type);

        // 指定图表的配置项和数据
        var myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '商品类型统计',
                subtext: '商品总数',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            itemStyle: {
                normal: {
                    //定义一个list，然后根据所以取得不同的值，这样就实现了，
                    color: function(params) {
                        // 建立所需颜色表
                        var colorList = [
                            '#f36f8a', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },

                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:type
            },
            series: [{
                name:"类别/数量",
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: lists,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
                }
            });
        });
    </script>


    <script type="text/javascript">

                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('years'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '订单年度统计',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{

                                type: 'category',
                                data: [],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }],
                            yAxis: [{
                                type: 'value'
                            }],
                            series: [{
                                name: '订单量',
                                itemStyle: {
                                    normal: {
                                        //定义一个list，然后根据所以取得不同的值，这样就实现了，
                                        color: function (params) {
                                            // 建立所需的颜色表
                                            var colorList = [
                                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                            ];
                                            return colorList[params.dataIndex]
                                        },

                                        //以下为是否显示，显示位置和显示格式的设置了
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{c}\n{b}'
                                        }
                                    }
                                },
                                type: 'bar',
                                barWidth: '60%',
                                data: []
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

 $(document).ready(function() {

     var months=[];
     var num=[];

    $.ajax({
        url: "/statistic/barGraph",
        type: "GET",
        dataType: "json",
        async: false,
        success: function(result) {
            console.log(result);


                var list = result.billList;
                for ( i = 0; i < list.length; i++) {
                    months.push(list[i].name);    //遍历月份并填入数组
                }

                for (i = 0; i < list.length; i++) {
                    num.push(list[i].value);//遍历值传入数组
                }
console.log(months);
                myChart.setOption({//加载数据图表

                    title: {
                        text: '订单年度统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{

                        type: 'category',
                        data: months,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '订单量',
                        itemStyle: {
                            normal: {
                                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                color: function (params) {
                                    // 建立所需的颜色表
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                                //以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}\n{b}'
                                }
                            }
                        },
                        type: 'bar',
                        barWidth: '60%',
                        data: num
                    }]
                });
                }
        });
 });
    </script>
</body>


<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        /*font-family: "Microsoft YaHei", "Helvetica Neue";*/
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        /*font-family: "Microsoft YaHei", "Helvetica Neue";*/
    }
</style>


<script type="text/javascript">

    $(document).ready(function() {

    $.ajax({
        url: "/statistic/total",
        type: "GET",
        dataType: "json",
        async: false,
        success: function(result) {
            var str = "";
            str += ''+ result.userNum +'';
            $('#userNum').html(str);

            var str1="";
            str1 += ''+ result.itemNum +'';
            $('#itemNum').html(str1);

            var str2="";
            str2 += ''+ result.billNum +'';
            $('#billNum').html(str2);

            var str3="";
            str3 += ''+ result.memberNum +'';
            $('#memberNum').html(str3);

        }
    });
    });
</script>
</html>